<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: head(links)"/>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<body>
<div class="ok-body" id="app" v-cloak>
    <template>
        <i-form ref="checkForm" :model="resource" :rules="ruleValidate" :label-width="100">
<!--             <form-item prop="id" label="id：">-->
<!--                 <i-input maxlength="20" v-model="resource.id" placeholder="请输入id"></i-input>-->
<!--             </form-item>-->
             <form-item prop="seq" label="排序：">
                 <i-input maxlength="20" v-model="resource.seq" placeholder="请输入序号"></i-input>
             </form-item>
             <form-item prop="title" label="标题：">
                 <i-input maxlength="20" v-model="resource.title" placeholder="请输入标题"></i-input>
             </form-item>
             <form-item prop="hyperLink" label="超链接：">
                 <i-input maxlength="20" v-model="resource.hyperLink" placeholder="请输入超链接"></i-input>
             </form-item>
             <form-item prop="content" label="内容：">
                 <i-input maxlength="20" v-model="resource.content" placeholder="请输入内容"></i-input>
             </form-item>
             <form-item prop="picture" label="图片：">
                <i-input maxlength="200" id="img"  v-model="resource.picture" placeholder="请输入图片"></i-input>
                 <input type="file" id="file" onchange="upload()">
             </form-item>
<!--             <form-item prop="createTime" label="创建时间：">-->
<!--                 <i-input maxlength="20" v-model="resource.createTime" placeholder="请输入创建时间"></i-input>-->
<!--             </form-item>-->
<!--             <form-item prop="updateTime" label="最后更新时间：">-->
<!--                 <i-input maxlength="20" v-model="resource.updateTime" placeholder="请输入最后更新时间"></i-input>-->
<!--             </form-item>-->
<!--             <form-item prop="createUid" label="创建人id：">-->
<!--                 <i-input maxlength="20" v-model="resource.createUid" placeholder="请输入创建人id"></i-input>-->
<!--             </form-item>-->
<!--             <form-item prop="updateUid" label="最后更新人id：">-->
<!--                 <i-input maxlength="20" v-model="resource.updateUid" placeholder="请输入最后更新人id"></i-input>-->
<!--             </form-item>-->
        </i-form>
    </template>
</div>
<div th:replace="common/foot :: foot(script)"></div>
<script th:inline="none">
var vm = new Vue({
    el: '#app',
    data:{
        resource:{},
        ruleValidate : {
                 // id: [
                 //    { required: true, message: 'id不能为空', trigger: 'blur' }
                 // ],
                 // seq: [
                 //    { required: true, message: '序号不能为空', trigger: 'blur' }
                 // ],
                 title: [
                    { required: true, message: '标题不能为空', trigger: 'blur' }
                 ],
                 // hyperLink: [
                 //    { required: true, message: '超链接不能为空', trigger: 'blur' }
                 // ],
                 content: [
                    { required: true, message: '内容不能为空', trigger: 'blur' }
                 ],
                 // picture: [
                 //    { required: true, message: '图片不能为空', trigger: 'blur' }
                 // ],
                 // createTime: [
                 //    { required: true, message: '创建时间不能为空', trigger: 'blur' }
                 // ],
                 // updateTime: [
                 //    { required: true, message: '最后更新时间不能为空', trigger: 'blur' }
                 // ],
                 // createUid: [
                 //    { required: true, message: '创建人id不能为空', trigger: 'blur' }
                 // ],
                 // updateUid: [
                 //    { required: true, message: '最后更新人id不能为空', trigger: 'blur' }
                 // ],
		}
    },
    methods: {
        acceptClick : function(dialog){
          vm.$refs.checkForm.validate(function(valid){
            if (valid) {
                layui.use(["okUtils", "okLayer"], function () {
                     okUtils = layui.okUtils;
                     okLayer = layui.okLayer;
                     vm.resource.serviceId ="our_service"
                     okUtils.ajaxCloud({
                        url:"/base/resource/save",
                        param : vm.resource,
                        json:true,
                        success : function(result) {
                             okLayer.msg.greenTick(result.msg, function () {
                                  dialog.load();
                             })
                        }
                    });
                });
            }
          });
	    }
    },
    created: function() {

    }
});

$('#img').hide()
function  upload(){
    //实例化一个表单对象，用于保存数据
    var formData = new FormData();
    console.log("==")
    formData.append('file', $('#file')[0].files[0]); //添加图片信息的参数
    console.log("$('#file')[0]")
    $.ajax({
        type:"post",
        url:"/base/resource/upload",
        data:formData,
        cache: false, //上传文件不需要缓存
        processData: false, // 告诉jQuery不要去处理发送的数据
        contentType: false, // 告诉jQuery不要去设置Content-Type请求头
        success:function(data) {
            console.log(data)
            console.log(data.fileUrl)
            if(data.code==0){
                $('div#img input:first').val(data.fileUrl)

                vm.resource.picture=data.fileUrl
                $('#img').show()
            }
        }
    });
}
</script>
</body>
</html>
